<template>
  <div>
    <div class="title">
      <div>
        <span>input内容复制到剪切板上</span>
      </div>
      <div>
        <span>vue + clipboard模块</span>
      </div>
    </div>
    <div style="width: 300px; margin-left: calc(50% - 150px); margin-top: 20px;">
      <copy-input :value="'text'" :label="'test'"></copy-input>
    </div>
    <div style="width: 300px; margin-left: calc(50% - 150px); margin-top: 20px;">
      <copy-input :value="'text'" :disabled="true" :label="'test'"></copy-input>
    </div>
    <div style="width: 300px; margin-left: calc(50% - 150px); margin-top: 20px;">
      <copy-input :value="'text'"></copy-input>
    </div>
    <div style="width: 300px; margin-left: calc(50% - 150px); margin-top: 20px;">
      <copy-input :value="'text'" :disabled="true"></copy-input>
    </div>
  </div>
</template>
<script>
import copyInput from './components';
export default {
  components: {copyInput},
  data () {
    return {}
  }
}
</script>
<style scoped>
.title{
  text-align: center;
}
</style>
